<template>
  <div class="flex flex-col">
    <!-- 数据对照 -->
    <el-row :gutter="6" class="row">
      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
        <ComparisonCard
          tag="今日"
          title="交易额"
          prefix="￥"
          value2Unit="笔"
          :decimals="2"
          :value="orderComparison?.todayAmount || 0"
          :value2="orderComparison?.todayPayCount || 0"
          :reference="orderComparison?.yesterdayAmount || 0"
        />
      </el-col>
      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
        <ComparisonCard
          tag="总计"
          title="交易额"
          title2="总订单"
          title2Unit="笔"
          :decimals="2"
          prefix="￥"
          isPercent="1"
          :value="orderComparison?.totalAmount || 0"
          :value3="orderComparison?.payWeek || 0"
          :reference="orderComparison?.totalCount || 0"
        />
      </el-col>
      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
        <ComparisonCard
          tag="今日"
          title="用户访问量"
          :value="userComparison?.value?.visitUserCount || 0"
          :reference="userComparison?.reference?.visitUserCount || 0"
        />
      </el-col>
      <el-col :md="6" :sm="12" :xs="24" :loading="loading">
        <ComparisonCard
          tag="今日"
          title="新增用户"
          :value="userComparison?.value?.registerUserCount || 0"
          :reference="userComparison?.reference?.registerUserCount || 0"
        />
      </el-col>
    </el-row>
    <el-row :gutter="4" class="row">
      <el-col :md="24">
        <TradeTrendCard  />
      </el-col>
<!--      <el-col :md="6">-->
<!--        &lt;!&ndash; 快捷入口 &ndash;&gt;-->
<!--        <ShortcutCard />-->
<!--        &lt;!&ndash; 运营数据 &ndash;&gt;-->
<!--        <OperationDataCard />-->
<!--      </el-col>-->
    </el-row>
    <el-row :gutter="4" class="row">
      <el-col :md="24">
        <BizStatisticsCard />
      </el-col>
      <!--      <el-col :md="6">-->
      <!--        &lt;!&ndash; 快捷入口 &ndash;&gt;-->
      <!--        <ShortcutCard />-->
      <!--        &lt;!&ndash; 运营数据 &ndash;&gt;-->
      <!--        <OperationDataCard />-->
      <!--      </el-col>-->
    </el-row>
    <el-row :gutter="4" class="mb-1">
      <el-col :md="18" :sm="24">
        <!-- 会员概览 -->
<!--        <MemberFunnelCard />-->
        <MemberStatisticsCard />
      </el-col>
      <el-col :md="6" :sm="24">
        <!-- 会员终端 -->
        <MemberTerminalCard />
      </el-col>
    </el-row>
    <!-- 会员统计 -->
<!--    <MemberStatisticsCard />-->
  </div>
</template>
<script lang="ts" setup>
import * as StaticsApi from '@/api/hosp/statics'
import * as MemberStatisticsApi from '@/api/hosp/statics/member'

import { DataComparisonRespVO } from '@/api/hosp/statics/common'
import { MemberCountRespVO } from '@/api/hosp/statics/member'
import ComparisonCard from './components/ComparisonCard.vue'
import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
import OperationDataCard from './components/OperationDataCard.vue'
import ShortcutCard from './components/ShortcutCard.vue'
import TradeTrendCard from './components/TradeTrendCard.vue'
import BizStatisticsCard from './components/BizStatisticsCard.vue'
import MemberTerminalCard from './components/MemberTerminalCard.vue'
import MemberFunnelCard from './components/MemberFunnelCard.vue'

/** 商城首页 */
defineOptions({ name: 'MallHome' })

const loading = ref(true) // 加载中
// 交易对照数据
const orderComparison = ref({ // 主页统计数据
  payAmountData: [], // 近七天交易图表
  payCount: {}, // 交易统计图表
  payType: [], // 支付方式统计图表
  todayAmount: 0.00, // 今日交易金额
  todayPayCount: 0, // 今日交易笔数
  yesterdayAmount: 0.00, // 昨日交易金额
  payWeek: 0.00, // 近7天总交易金额
  totalPayCount: 0, // 交易总笔数
  totalAmount: 0.00, // 交易总金额
  totalIsv: 0, // 当前服务商总数
  totalMch: 0 // 当前商户总数
})
const userComparison = ref<DataComparisonRespVO<MemberCountRespVO>>() // 用户对照数据

const activeTabName = ref('users')
const handleTabClick = (tab, event) => {
  activeTabName.value = tab.paneName
}

/** 查询交易对照卡片数据 */
const getOrderComparison = async () => {
  orderComparison.value = await StaticsApi.index();
  console.table(orderComparison.value);
}

/** 查询会员用户数量对照卡片数据 */
const getUserCountComparison = async () => {
  userComparison.value = await MemberStatisticsApi.getUserCountComparison()
}

/** 初始化 **/
onMounted(async () => {
  loading.value = true
  await Promise.all([getOrderComparison(), getUserCountComparison()])
  loading.value = false
})
</script>
<style lang="scss" scoped>
.row {
  .el-col {
    margin-bottom: 5px;
  }
}
</style>
